<template>
  <div class="send" slot="icon">
    <!-- 顶部抬头 -->
    <div class="header">
      <router-link to="/send">
        <span>
          <van-icon name="arrow-left" />
        </span>
      </router-link>
      发布领养
    </div>

    <div class="send-adopt">
      <!-- 宠物信息 -->
      <div class="send-adopt-msg">
        <div>
          <h1>宠物信息</h1>
        </div>
        <!-- 类型 -->
        <div>
          <h2><span>*</span> 类型</h2>
          <div>
            <span v-for="(i, index) in type" :key="i.id" @click="typeCur = index"
              :class="{ selectCur: typeCur == index }">{{
                  i.name
              }}</span>
            <!-- <span :class="cur" @click="selectCur">猫咪</span>
          <span :class="preve" @click="">狗狗</span> -->
          </div>
        </div>
        <!-- 姓名 -->
        <div>
          <h2><span>*</span>姓名</h2>
          <div>
            <input type="text" class="input">
          </div>
        </div>
        <!-- 年龄 -->
        <div>
          <h2><span>*</span>年龄</h2>
          <div>
            <input type="text" class="input" v-model="age" @click="showPopup">
            <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
              <van-picker title="标题" show-toolbar :columns="adoptAge" @confirm="onConfirm" @cancel="onCancel" />
            </van-popup>
          </div>
        </div>
        <!-- 性别 -->
        <div>
          <h2><span>*</span>性别</h2>
          <div>
            <span v-for="(i, index) in sex" :key="i.id" @click="sexCur = index"
              :class="{ selectCur: sexCur == index }">{{
                  i.name
              }}</span>
          </div>

        </div>
      </div>
      <!-- 宠物现状 -->
      <div class="send-adopt-status">
        <div>
          <h1>宠物现状</h1>
        </div>
        <div>
          <h2><span>*</span>疫苗</h2>
          <div>
            <span v-for="(i, index) in vaccines" :key="i.id" @click="vaccinesCur = index"
              :class="{ selectCur: vaccinesCur == index }">{{
                  i.name
              }}</span>
          </div>

        </div>
        <div>
          <h2><span>*</span>驱虫</h2>
          <div>
            <span v-for="(i, index) in parasite" :key="i.id" @click="parasiteCur = index"
              :class="{ selectCur: parasiteCur == index }">{{
                  i.name
              }}</span>

          </div>

        </div>
        <div>
          <h2><span>*</span>绝育</h2>
          <div>
            <span v-for="(i, index) in sterilization" :key="i.id" @click="sterilizationCur = index"
              :class="{ selectCur: sterilizationCur == index }">{{
                  i.name
              }}</span>
          </div>

        </div>
      </div>
      <!-- 上传图片 -->
      <div class="send-adopt-img">
        <div>
          <h1>上传图片<span>(*最少上传一张图片或一个视频)</span></h1>
        </div>
        <!-- 上传图片 -->
        <div>
          <van-uploader v-model="fileList" :deletable="false" />
        </div>

      </div>
      <!-- 领养要求 -->
      <div class="send-adopt-requirement">
        <div>
          <h1>领养要求</h1>
        </div>
        <div>
          <h2><span>*</span>疫苗</h2>
          <div>
            <span v-for="(i, index) in requirement" :key="i.id" ref="requirementRef" @click="onRequirement(index)"
              :class="{ selectCur: requirementSelect }">{{
                  i.name
              }}</span>
          </div>
        </div>
        <div>
        </div>
      </div>
      <!-- 联系方式 -->
      <div class="send-adopt-requirement">
        <div>
          <h1>联系方式</h1>
        </div>
        <!-- 地址 -->
        <div>
          <h2><span>*</span>地址</h2>
           <div>
            <input type="text" class="input" v-model="age" @click="showPopup">
            <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
            <MyArea></MyArea>
              <!-- <van-picker title="标题" show-toolbar :columns="columns" @confirm="onConfirmArea"  /> -->
            </van-popup>
          </div>
        </div>
        <!-- 手机 -->
        <div>
          <h2><span>*</span>手机</h2>
          <div>
            <input type="text" class="input">
          </div>
        </div>
        <!-- 微信 -->
        <div>
          <h2><span>*</span>微信</h2>
          <div>
            <input type="text" class="input">
          </div>
        </div>
        
      </div>
      <div>
        <van-button round color="#EF8C89" block>发布</van-button>
      </div>
    </div>

  </div>
</template>

<script>
import { nanoid } from 'nanoid'
import MyArea from '../../components/MyArea.vue'
export default {
    data() {
        return {
            typeCur: "",
            sexCur: "",
            vaccinesCur: "",
            parasiteCur: "",
            sterilizationCur: "",
            requirementSelect: true,
            requirementCur: "",
            age: "点击选择",
            show: false,
            type: [
                { id: nanoid(), name: "猫咪" },
                { id: nanoid(), name: "狗狗" }
            ],
            sex: [
                { id: nanoid(), name: "妹妹" },
                { id: nanoid(), name: "弟弟" },
                { id: nanoid(), name: "不详" },
            ],
            vaccines: [
                { id: nanoid(), name: "已免疫" },
                { id: nanoid(), name: "免疫中" },
                { id: nanoid(), name: "未免疫" },
                { id: nanoid(), name: "不详" },
            ],
            parasite: [
                { id: nanoid(), name: "已驱虫" },
                { id: nanoid(), name: "已驱虫" },
                { id: nanoid(), name: "不详" },
            ],
            sterilization: [
                { id: nanoid(), name: "已绝育" },
                { id: nanoid(), name: "未绝育" },
                { id: nanoid(), name: "不详" },
            ],
            requirement: [
                { id: nanoid(), name: "仅限同城" },
                { id: nanoid(), name: "必须封网" },
                { id: nanoid(), name: "视频照片回访" },
                { id: nanoid(), name: "适合绝育" },
                { id: nanoid(), name: "科学喂养" },
                { id: nanoid(), name: "签署协议" },
                { id: nanoid(), name: "其他" },
            ],
            adoptAge: ["不详", "0-3个月", "3-6个月", "6-12个月", "1岁", "大于1岁", "2岁", "3岁", "4岁", "5岁", "大于5岁", "大于10岁",],
            dialogImageUrl: "",
            dialogVisible: false,
            disabled: false,
            fileList: []
        };
    },
    methods: {
        // 年龄弹框是否显示
        showPopup() {
            this.show = true;
        },
        // 年龄
        onConfirm(value, index) {
            this.age = value;
            this.onCancel();
        },
        onCancel() {
            this.show = false;
        },
        onConfirmArea(){
          
        },
        // 多选
        onRequirement(index) {
            this.requirementCur = index;
            console.log(this.$refs.requirementRef[index]);
            if (this.requirementSelect) {
                this.requirementSelect = false;
            }
            else {
                this.requirementSelect = true;
            }
        }
    },
    components: { MyArea }
}
</script>

<style lang="scss" scoped>
.header {
  height: 40px;
  background-color: #EF8C89;
  text-align: center;
  line-height: 40px;
  color: #fff;

  span {
    color: #fff;
    position: absolute;
    left: 1rem;
  }
}

.send-adopt {
  background-color: #FDF3EE;
  padding: 1.5rem;

  .send-adopt-msg,
  .send-adopt-status,
  .send-adopt-img,
  .send-adopt-requirement {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border-radius: 15px;

    >div {
      margin-bottom: 1.5rem;

      >div {
        margin-top: 1rem;

        span {
          display: inline-block;
          font-size: 0.8rem;
          padding: 0.5rem 0.8rem;
          margin-bottom: 0.5rem;
          background-color: #F7F7F7;
          border-radius: 13px;
          color: #C4C1CA;
          border: 1px solid #F7F7F7;
          margin-right: 0.6rem;

          &.selectCur {
            padding: 0.5rem 0.8rem;
            background-color: #EFEDFD;
            border-radius: 13px;
            color: #9683E7;
            border: 1px solid #9683E7;

          }
        }
      }

      >h2>span {
        color: red
      }
    }
  }

  .send-adopt-img {
    >div>h1>span {
      color: #EF8C89;
    }
  }
}

.input {
  width: 100%;
  padding: 0.7rem;
  background-color: #F7F7F7;
  border: none;
  border-radius: 10px;
}



// .selectCur {
//   padding: 0.5rem 0.8rem;
//   background-color: #EFEDFD;
//   border-radius: 13px;
//   color: #9683E7;
//   border: 1px solid #9683E7;
//   margin: 0 1rem;
// }

// .selectPreve {

// }
</style>